<script setup lang="ts">
  import { defineProps, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      fixed: 'left',
      align: 'center',
      width: 60,
    },
    {
      title: '接口描述',
      dataIndex: 'description',
      width: 180,
      className: 'table-column',
      ellipsis: true,
    },
    {
      title: '请求URL',
      dataIndex: 'url',
      width: 200,
      className: 'table-column',
      ellipsis: true,
    },
    {
      title: '请求方法',
      dataIndex: 'method',
      width: 180,
      className: 'table-column',
      ellipsis: true,
    },
    {
      title: '请求参数',
      dataIndex: 'params',
      width: 200,
      className: 'table-column',
      ellipsis: true,
    },
    {
      title: '响应结果',
      dataIndex: 'response',
      width: 180,
      className: 'table-column',
      ellipsis: true,
    },
    {
      title: '执行时长',
      dataIndex: 'executionTime',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: 180,
      ellipsis: true,
    },

    {
      title: '请求IP',
      dataIndex: 'ip',
      width: 140,
      ellipsis: true,
    },

    {
      title: '用户代理',
      dataIndex: 'userAgent',
      width: 120,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 120,
      slotName: 'status',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
    },

    {
      title: '错误信息',
      dataIndex: 'errorMsg',
      width: 180,
      className: 'table-column',
      ellipsis: true,
    },
    {
      title: 'BKEY',
      dataIndex: 'bkey',
      width: 140,
      ellipsis: true,
    },
    {
      title: '是否反馈',
      dataIndex: 'isResult',
      width: 120,
      slotName: 'isResult',
      ellipsis: true,
    },
    {
      title: 'Cemop反馈信息',
      dataIndex: 'cemopMsg',
      width: 180,
      className: 'table-column',
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: 180,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
      fixed: 'right',
      width: 80,
    },
  ];

  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.responseBody?.data || [];
      total.value = props.tableData?.responseBody?.pageTotal || 0;
    },
    { immediate: true }
  );

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 56);
  });
</script>

<template>
  <div>
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      column-resizable
      scrollbar
      :data="localTableData"
    >
      <template #id="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
      <template #status="{ record }">
        <a-tag v-if="record.status === 0" color="blue">发送成功</a-tag>
        <a-tag v-if="record.status === 1" color="orange">发送失败</a-tag>
        <a-tag v-if="record.status === 2" color="green">接收成功</a-tag>
        <a-tag v-if="record.status === 3" color="red">接收失败</a-tag>
      </template>
      <template #isResult="{ record }">
        <a-tag v-if="record.isResult === 0" color="red">否</a-tag>
        <a-tag v-else color="green">是</a-tag>
      </template>
      <!-- <template #receiveData="{ record }">
        <a-popover title="接收数据" :content="record.receiveData">
          <span
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ record.receiveData }}
          </span>
        </a-popover>
      </template> -->
      <template #action>
        <a-button type="text" class="font-color">审批</a-button>
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:pageSize="changeSize"
      />
    </div>
  </div>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
